{extend name="lib/common_list" /}
{block name="title"}{/block}
{block name="css"}{/block}
{block name="javascript"}
<script>
    /**
     * 加载表格
     */
    function initTable() {
        //先销毁表格
        $('#tb').bootstrapTable('destroy');
        //初始化表格,动态从服务器加载数据
        $("#tb").bootstrapTable({
            method: "Post",  //使用Post请求到服务器获取数据
            url: "{:url('applet_img/getList')}", //获取数据的Servlet地址
            striped: true,  //表格显示条纹
            pagination: true, //启动分页
            pageSize: 15,  //每页显示的记录数
            pageNumber: 1, //当前第几页
            pageList: [15, 50],  //记录数可选列表
            search: false,  //是否启用查询
            sortable: true, //是否启用排序
            sortOrder: "desc", //排序方式
            //showColumns: true,  //显示下拉框勾选要显示的列
            //showRefresh: true,  //显示刷新按钮
            //sortName: "PullTime",
            sidePagination: "server", //表示服务端请求
            //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
            //设置为limit可以获取limit, offset, search, sort, order
            queryParamsType: "limit",
            contentType: "application/x-www-form-urlencoded",
            queryParams: function queryParams(params) {   //设置查询参数
                var param = {
                    limit: params.limit,
                    offset: params.offset,
                    sortName: params.sort,
                    sortOrder: params.order,
                    keywords: $("input[name=keywords]").val(),
                    //applet_id: $("#applet_id").val(),
                };
                return param;
            },
            onLoadSuccess: function () {  //加载成功时执行

            },
            onLoadError: function () {  //加载失败时执行
                layer.msg("加载数据失败", { time: 1500, icon: 2 });
            },
            rowStyle: function (row, index) {
                var strclass = "";
                return { classes: strclass }
            }
        });
    }

    $(document).ready(function () {
        //调用函数，初始化表格
        initTable();
        //点击查询按钮
        $("#search").bind("click", initTable);
        $("#btnAdd").bind("click", add);
    });

    function initAcTable() {
        initTable();
    }

    /**
     * 新增页
     */
    var layer_add_index;
    function add() {
        layer_add_index = layer.open({
            type: 2,
            title: "新增小程序头像",
            area: ['70%', '78%'],
            content: "{:url('applet_img/add')}"
        })
    }

    /**
     * 修改页
     */
    var layer_edit_index;
    function edit(id) {
        layer_edit_index = layer.open({
            type: 2,
            title: "修改小程序头像",
            area: ['70%', '78%'],
            content:"{:url('applet_img/edit')}?id="+id
        })
    }

    /**
     * 详情页
     */
    var layer_view_index;
    function view(id) {
        layer_view_index = layer.open({
            type:2,
            title:'小程序头像详情',
            area:['70%', '90%'],
            content:"{:url('applet_img/view')}?id=" +id
        })
    }

    /**
     * 审核
     * @param id
     * @param name
     * @param status
     */
    function lock(id, name,status) {
        var msg = '你确定要开启【'+ name +'】吗？';
        if (status == 1) {
            msg = '你确定要锁定【'+ name +'】吗？';
        }
        layer.confirm(msg, {
            btn: ['是', '否'] //按钮
        }, function () {
            var load_index = layer.load(0, { shade: false });
            $.ajax({
                type: "post",
                url: "{:url('applet_img/lock')}",
                data: { id: id },
                dataType: "json",
                success: function (result) {
                    layer.close(load_index);
                    if (result.code == 1) {
                        var ly = layer.alert(result.msg, function () {
                            $('#tb').bootstrapTable('refresh');
                            layer.close(ly);
                        });
                    } else {
                        layer.alert(result.msg);
                    }
                },
                error:function(xhr,textStatus){
                    layer.close(load_index);
                    layer.alert('服务器繁忙！');
                }
            });
        });
    }

    /**
     * 动作
     * @param row
     * @param index
     * @returns {string}
     */
    function operateFormatter(index, row) {
        var html = "";
        if (row.status == 1) {
            html += "<a href=\"javascript:lock("+ row.id + ", '"+ row.applet_name +"', '"+ row.status +"');\"><i class=\"glyphicon glyphicon-lock text-danger\"></i>锁定</a>&nbsp;&nbsp;";
        } else {
            html += "<a href=\"javascript:lock("+ row.id + ", '"+ row.applet_name +"', '"+ row.status +"');\"><i class=\"glyphicon glyphicon-ok-sign text-success\"></i>启用</a>&nbsp;&nbsp;";
        }
       // html += "<a href=\"javascript:view("+ row.id + ");\"><i class=\"glyphicon glyphicon-eye-open text-default\"></i>详情</a>&nbsp;&nbsp;";
        html += "<a href=\"javascript:edit("+ row.id + ", '"+ row.applet_name +"');\"><i class=\"glyphicon glyphicon-edit text-green\"></i>编辑</a>&nbsp;&nbsp;";

        return html;
    }

    function statusFormat(index, row){
        if (index ==1) {
            return "<span><i class='glyphicon glyphicon-ok text-green'/></span>";
        } else {
            return "<span><i class='glyphicon glyphicon-remove text-danger'/></span>";
        }

    }

    /**
     * 图片
     * @param index
     * @param row
     * @returns {string}
     */
    function imageFormatter(index, row) {
        if (index) {
            var patt1 = new RegExp("^(http:\/\/|https:\/\/).*$");
            pic_url = index;
            var html = '<img src="' + pic_url + '" class="show_image" style="width: 100px;height: 70px;" height="25">';
            html += '<div style="display: none; background:#fff; margin-top:5px; border:solid 1px #ff940a;position:absolute;z-index:999;">';
            html += '<img src="' + pic_url + '" width="250"></div>';
            return html;
        } else {
            return "";
        }
    }

    // 刷新当前一页表格
    function refreshtb() {
        $('#tb').bootstrapTable('refresh');
    }
</script>
{/block}
{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5></h5>
                </div>
                <div class="col-sm-2 m-b-xs">
                    <span>
                        <button type="button" class="btn btn-primary btn-sm" id="btnAdd"><i class="glyphicon glyphicon-plus"></i> 新增</button>
                    </span>
                </div>
                <div class="ibox-content">
                    <div class="row">

                        <div class="col-sm-2 col-sm-offset-2">
                            <div class="input-group">
                                <span class="input-group-btn">
                                    <input type="text" placeholder="请输入搜索关键字" class="input-sm form-control" id="keywords" name="keywords">
                                    <button type="button" class="btn btn-sm btn-primary" id="search">搜索</button>
                                </span>
                            </div>
                        </div>
                        <span id="refresh" class="fa fa-refresh fa-spin" title="刷新" onclick="javascript:$('#tb').bootstrapTable('refresh')"></span>
                    </div>
                    <table data-toggle="table" id="tb" data-pagination="true">
                        <thead>
                        <tr>
                            <th data-align="center" data-field="applet_id" data-sortable="true">小程序ID</th>
                            <th data-align="center" data-field="applet_name">小程序名称</th>
                            <th data-align="center" data-field="applet_img" data-formatter="imageFormatter">小程序头像</th>
                            <th data-align="center" data-field="original_id">原始ID</th>
                            <th data-align="center" data-field="applet_app_id">APP ID</th>
                            <th data-align="center" data-field="status" data-formatter="statusFormat" data-sortable="true">状态</th>
                            <th data-align="center" data-field="created_time" data-sortable="true">添加时间</th>
                            <th data-align="center" data-field="updated_time" data-sortable="true">更新时间</th>

                            <th data-align="center" data-formatter="operateFormatter">操作</th>
                        </tr>
                        </thead>

                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}